<template>
  <view class="add-activity common-container">
    <wd-form custom-class="common-form" ref="formRef" :model="formModel">
      <wd-cell-group>
        <wd-input
          label="活动名称"
          label-width="80px"
          prop="name"
          v-model="formModel.name"
          placeholder="请输入"
        />
        <wd-picker :columns="hallColumns" label="所属礼堂" v-model="formModel.hallId" />
        <wd-picker :columns="dictData.orderType" label="所属类型" v-model="formModel.type" />
        <!-- :min-date="nowDate" -->
        <wd-datetime-picker label="活动时间" type="date" v-model="formModel.date" />
        <wd-input
          label="活动地点"
          label-width="80px"
          prop="name"
          v-model="formModel.address"
          placeholder="请输入"
        />
        <wd-input
          type="digit"
          label="参与人数"
          label-width="80px"
          prop="expectPayerNumber"
          v-model="formModel.expectPayerNumber"
          placeholder="请输入"
        />
        <wd-input
          type="number"
          label="所需资金"
          label-width="80px"
          prop="expectFee"
          v-model="formModel.expectFee"
          placeholder="请输入"
        />
        <wd-cell title="安全预案">
          <wd-textarea v-model="formModel.safeNote" placeholder="请填写评价" />
        </wd-cell>
        <wd-cell title="活动介绍">
          <wd-textarea v-model="formModel.note" placeholder="请填写评价" />
        </wd-cell>
      </wd-cell-group>
    </wd-form>
    <wd-button custom-class="submit-btn" type="primary" @click="submitForm" :round="false" block>
      提交{{ activityId ? '编辑' : '申请' }}
    </wd-button>
  </view>
</template>

<script setup>
import HallApi from '@/service/hall'
import OrderApi from '@/service/order'
import ActivityApi from '@/service/activity'
import { useDictStore } from '@/store/dict'
import { prevPageNeedRefresh } from '@/utils'
import dayjs from 'dayjs'

const { dictData } = useDictStore()

const nowDate = new Date().getTime()

const initFormModel = {
  name: '',
  hallId: '',
  type: '',
  address: '',
  date: nowDate,
  expectFee: '',
  expectPayerNumber: '',
  note: '',
  safeNote: '',
}

const formRef = ref()
const formModel = ref({
  name: '',
  hallId: '',
  type: '',
  address: '',
  date: nowDate,
  expectFee: '',
  expectPayerNumber: '',
  note: '',
  safeNote: '',
})
const formKeyMap = {
  name: '活动名称',
  hallId: '所属礼堂',
  type: '所属类型',
  address: '活动地点',
  date: '活动时间',
  expectFee: '所需资金',
  expectPayerNumber: '参与人数',
  note: '活动介绍',
  safeNote: '安全预案',
}

const hallColumns = ref([])
const getHallDict = async () => {
  const { code, result } = await HallApi.getHallDict()
  if (code === 200 && result) {
    hallColumns.value = result
  }
}
getHallDict()

const submitForm = () => {
  let objKey = ''
  for (const key in formKeyMap) {
    if (!formModel.value[key]) {
      objKey = key
      break
    }
  }
  if (objKey) {
    uni.showToast({
      title: `${formKeyMap[objKey]}不能为空`,
      icon: 'none',
    })
    return false
  }

  formRef.value
    .validate()
    .then(async () => {
      const date = dayjs(formModel.value.date).format('YYYY-MM-DD')
      const params = {
        ...formModel.value,
        date,
      }
      if (activityId.value) {
        params.id = activityId.value
      }
      const apiFn = activityId.value
        ? OrderApi.editActivityApplication
        : OrderApi.addActivityApplication
      const { code, result, message } = await apiFn(params)
      if (code === 200 && result) {
        const title = activityId.value ? '编辑成功' : '添加成功'
        uni.showToast({
          icon: 'success',
          title,
        })
        formModel.value = initFormModel
        setTimeout(() => {
          isNavigateBack.value = true
          uni.navigateBack()
        }, 1000)
      } else {
        uni.showToast({
          icon: 'error',
          title: message,
        })
      }
    })
    .catch((error) => {
      console.error(error)
    })
}

const getDetail = async (id) => {
  const { code, result } = await ActivityApi.getActivityApproveDetail({ id })
  if (code === 200 && result) {
    formModel.value = { ...result }
    formModel.value.date = new Date(result.date).getTime()
  }
}

const activityId = ref(0)
onLoad((options) => {
  // 有id时为编辑
  activityId.value = options.id
  options.id && getDetail(options.id)
})

const isNavigateBack = ref(false)
onUnload(() => {
  prevPageNeedRefresh(isNavigateBack.value)
})
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style lang="scss">
@import '../../../../style/common-form';

.add-activity {
  height: calc(100vh - 46px);
  overflow: scroll;

  .submit-btn {
    margin-bottom: 30px;
  }
}
</style>
